<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '场地列表',
  },
}
</route>
<script setup lang="ts">
import { pageSearchVenue } from '@/service/reservation/reservation'
import { VenueSearchVO } from '@/service/reservation/type'
import { showSuccess } from '@/utils/toast'
import { useAuthStore } from '@/store'

const useAuth = useAuthStore()

const keyword = ref('')
const current = ref(1)
const columnGap = ref(16)
const list = ref<Array<VenueSearchVO>>([])
const list1 = ref<Array<VenueSearchVO>>([])
const list2 = ref<Array<VenueSearchVO>>([])
const loadStatus = ref('loadmore')
const waterFull = ref<any>()
const doSearch = async () => {
  list.value = []
  waterFull.value.clear()
  list1.value = []
  list2.value = []
  current.value = 1
  const resData = await pageSearchVenue({ keyword: keyword.value, current: current.value })
  if (resData.code === 0) {
    list.value = resData.data.records
  }
}
const changeList = (e: { name: any; value: any }) => {
  if (e.name === 'list1') {
    list1.value.push(e.value)
  } else if (e.name === 'list2') {
    list2.value.push(e.value)
  }
}
const toDetail = (id: string) => {
  if (!useAuth.getToken()) {
    uni.$uv.route('/pages/login/login')
  }
  uni.$uv.route('/pages/reservation-detail/reservation-detail', {
    id,
  })
}

const style = {
  width: `311rpx`,
}

onLoad(async () => {
  const resData = await pageSearchVenue({ keyword: keyword.value, current: current.value })
  if (resData.code === 0) {
    list.value = resData.data.records
  }
})

onPullDownRefresh(async () => {
  list.value = []
  waterFull.value.clear()
  list1.value = []
  list2.value = []
  current.value = 1
  keyword.value = ''
  const resData = await pageSearchVenue({ keyword: keyword.value, current: current.value })
  if (resData.code === 0) {
    list.value = resData.data.records
    showSuccess('刷新成功')
    uni.stopPullDownRefresh()
  }
})

onReachBottom(async () => {
  if (loadStatus.value === 'loadmore') {
    loadStatus.value = 'loading'
    current.value++
    const resData = await pageSearchVenue({ keyword: keyword.value, current: current.value })
    if (resData.code === 0) {
      if (resData.data.records.length === 0) {
        loadStatus.value = 'nomore'
        return
      }
      list.value.push(...resData.data.records)
    }
    loadStatus.value = 'loadmore'
  }
})
const scrollTop = ref(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})
</script>

<template>
  <view mt-2 ml-4 mr-4>
    <uv-search
      placeholder="请输入搜索内容"
      v-model="keyword"
      @search="doSearch()"
      @custom="doSearch()"
      :action-style="{
        backgroundColor: '#007aff',
        color: '#fff',
        borderRadius: '8rpx',
        padding: '8rpx',
      }"
      clearabled
    ></uv-search>
    <view mt-2 />
    <uv-waterfall ref="waterFull" v-model="list" @changeList="changeList" :column-gap="columnGap">
      <template v-slot:list1>
        <view>
          <view
            v-for="(item, index) in list1"
            :key="index"
            mb2
            border="rd"
            bg-#007aff
            c-white
            p1
            @click="toDetail(item.id)"
          >
            <view :style="style">
              <image :src="item.posterUrl" mode="widthFix" :style="style"></image>
            </view>
            <view>
              <view>
                <text font-size="3">编号：{{ item.code }}</text>
              </view>
              <view>
                <text font-size="3">名称：{{ item.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-slot:list2>
        <view>
          <view
            v-for="(item, index) in list2"
            :key="index"
            mb2
            border="rd"
            bg-#007aff
            c-white
            p1
            @click="toDetail(item.id)"
          >
            <view :style="style">
              <image :src="item.posterUrl" mode="widthFix" :style="style"></image>
            </view>
            <view>
              <view>
                <text font-size="3">编号：{{ item.code }}</text>
              </view>
              <view>
                <text font-size="3">名称：{{ item.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </uv-waterfall>
    <uv-load-more :status="loadStatus" />
    <uv-back-top :scroll-top="scrollTop"></uv-back-top>
  </view>
</template>

<style scoped lang="scss"></style>
